<template>
  <div class="fastlogin_page">
    <header>
      <van-icon name="arrow-left" class="icon" @click="back" />
      <p>一键登录</p>
    </header>
    <main>
      <img class="cat" src="../../assets/img/register&login/fl1.png" alt="" />
      <p class="phone_p">{{ phone }}</p>
      <div @click="oauth" class="login_div">一键登录</div>
      <div class="others">
        <div class="hr_box">
          <van-divider
            :style="{
              color: '#959595',
              borderColor: '#9a9a9a',
              padding: '0 16px',
            }"
          >
            其他登录方式
          </van-divider>
        </div>
        <ul>
          <li @click="toWechat">
            <img src="../../assets/img/register&login/fl2.png" alt="" />
            &ensp;<span>微信</span>
          </li>
          <li @click="toLogin">
            <img src="../../assets/img/register&login/fl3.png" alt="" />
            &ensp;<span>账号密码</span>
          </li>
          <li @click="toRegister">
            <img
              src="../../assets/img/register&login/fl4.png"
              alt=""
            />&ensp;<span>注册</span>
          </li>
        </ul>
      </div>
    </main>
    <footer>
      <p>登录注册代表同意中国移动认证服务条款和用户协议、隐私政策</p>
    </footer>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { ref } from "vue";
import { Toast } from "vant";
export default {
  setup() {
    const phone = ref("157****5354");
    const router = useRouter();
    const back = () => {
      router.push("/home/mine");
    };
    const oauth = () => {
      Toast({
        message: "功能暂未开通，请使用账号登录",
        position: "bottom",
      });
    };
    const toWechat = () => {
      Toast({
        message: "功能暂未开通，请使用账号登录",
        position: "bottom",
      });
    };
    const toLogin = () => {
      router.push("/login");
    };
    const toRegister = () => {
      router.push("/register");
    };
    return {
      phone,
      back,
      oauth,
      toWechat,
      toLogin,
      toRegister,
    };
  },
};
</script>

<style lang="less" scoped>
.fastlogin_page {
  header {
    width: 100%;
    height: 90px;
    .icon {
      position: absolute;
      top: 44.5px;
      left: 18px;
      width: 9.5px;
      height: 17px;
      color: #353534;
      font-size: 24px;
      font-weight: 600;
    }
    p {
      text-align: center;
      position: absolute;
      top: 48px;
      left: 135px;
      width: 100px;
      height: 15.5px;
      color: #333332;
      font-weight: 600;
      font-size: 20px;
    }
  }
  main {
    width: 100%;
    height: 600px;
    position: relative;
    .cat {
      position: absolute;
      left: 112px;
      top: 180px;
      width: 151px;
      height: 110px;
    }
    .phone_p {
      font-size: 22px;
      font-weight: 600;
      position: absolute;
      left: 130px;
      top: 320px;
    }
    .login_div {
      font-size: 22px;
      font-weight: 600;
      position: absolute;
      left: 35px;
      top: 360px;
      width: 305px;
      height: 45px;
      line-height: 45px;
      text-align: center;
      border-radius: 22.5px;
      background: #68dcdc;
    }
    .others {
      position: absolute;
      top: 450px;
      left: 14px;
      .van-divider {
        font-size: 18px;
        font-weight: 600;
      }
      ul {
        width: 100%;
        display: flex;
        padding-left: 30px;
        li {
          width: 100px;
          flex: 1;
          font-size: 16px;
          font-weight: 600;
          img {
            width: 19px;
            height: 19px;
            display: block;
            float: left;
          }
        }
        li:nth-child(3) {
          margin-left: 18px;
        }
      }
    }
  }
  footer {
    position: relative;
    width: 100%;
    height: 120px;
    p {
      font-size: 14px;
      font-weight: 600;
      width: 264px;
      margin: 0 auto;
      color: #222222;
      padding-top: 45px;
    }
  }
}
</style>
